<script>
export default {
  data () {
    return {
      breadcrumb: [],
      title: {}
    }
  },
  methods: {
    init () {
      this.breadcrumb = [...this.$route.matched]
      this.breadcrumb.shift()
      this.title = this.breadcrumb.find((v, k, n) => {
        return k + 1 === n.length
      })
    }
  },
  watch: {
    '$route': {
      handler: function () {
        this.init()
      },
      immediate: true
    }
  },
  render () {
    return (
      <div class="breadcrumb">
        <a-breadcrumb>
          { this.breadcrumb.map((v,k,n) => {
              if (k === 0) {
                return (
                  <a-breadcrumb-item key={ v.name }>
                    <router-link  to={{ name:v.name }}>{v.meta.title}</router-link>
                  </a-breadcrumb-item>
                )
              } else if ((k+1) !== n.length && k !== 1) {
                return (
                  <a-breadcrumb-item key={ v.name }>
                    <router-link  to={{ name:v.name }}>{v.meta.title}</router-link>
                  </a-breadcrumb-item>
                )
              } else if (k == 1) {
                 return (
                    <a-breadcrumb-item key={ v.name }>
                      <span> { v.meta.title }</span>
                    </a-breadcrumb-item>
                 )
               } else {
                 return (
                   <a-breadcrumb-item key={ v.name }>
                     <span> { v.meta.title }</span>
                   </a-breadcrumb-item>
                 )
               }
          }) }
        </a-breadcrumb>
        { this.title.meta.titleHidden ? null : (<h3 >{ this.title.meta.title }</h3>) }
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
  .breadcrumb{
    background: #fff;
    padding: 16px 32px;
    border-bottom: 1px solid #e8e8e8;
    h3{
      font-size: 20px;
      font-weight: 500;
      color: rgba(0,0,0,.85);
      margin: 16px 0 0;
    }
  }
</style>
